import { UserOutlined } from '@ant-design/icons';
import { Avatar, List } from 'antd';
import React from 'react';

const data = [
  {
    title: '姓名：嫌疑人A',
    level: '二级',
    type: '贩毒',
  },
  {
    title: '姓名：嫌疑人B',
    type: '打架',
    level: '二级',
  },
  {
    type: '打架',
    title: '姓名：嫌疑人C',
  },
  {
    type: '打架',
    title: '姓名：嫌疑人D',
  },
];

const App: React.FC = () => (
  <List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={(item, index) => (
      <List.Item>
        <List.Item.Meta
          avatar={<Avatar size={44} icon={<UserOutlined />} />}
          title={<a>{item.title}</a>}
          description={
            <div>
              <div>监室：A区201</div>
              <div>犯罪类型：{item.type}</div>
              <div className="flex-aic">
                风险情况：
                {item.level === '二级' && (
                  <div className="bold flex-aic" style={{ color: 'orange' }}>
                    二级
                    <div className="ml10" style={{ color: 'orange', fontSize: 26 }}>
                      ↑
                    </div>
                  </div>
                )}
                {!item.level && <div style={{ color: 'green' }}>{item.level || '三级'}</div>}
              </div>
            </div>
          }
        />
      </List.Item>
    )}
  />
);

export default App;
